<template>
    <div>
        <TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :total="page.total" :editFunc="handleEdit"
            :changePage="changePage" :change-page-size="changePageSize" :currentPage="page.page" :pageSize="page.page_size">
                <template #toolbarBtn>
                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
                </template>

                <template #t_type_img="{rows}">
                    <el-image shape="square" style="width: 60px; height: 60px" fit="contain" :src="rows.t_type_img" />
                </template>
               
                <template #t_status="{rows}">
                    <el-tag v-if="rows.t_status == 1" type="success">使用中</el-tag>
                    <el-tag v-else-if="rows.t_status == 2" type="info">借出</el-tag>
                    <el-tag v-else type="danger">遗失</el-tag>
                </template>
            </TableCustom>

        </div>
        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" :getImgUrl="getImg"/>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="collaborativeAdministrator-user">
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import { Place } from './types/place.js';
import { query_glasses_type_list, insert_update_glasses_type, delete_glasses } from '@/api';
import TableCustom from '@/components/table-custom.vue';
import TableSearch from '@/components/table-search.vue';
import { FormOption, FormOptionList } from '@/types/form-option';

// 查询相关
const query = reactive({
    t_type_name: null,
});
// 查询条件相关
const searchOpt = ref<FormOptionList[]>([
    { type: 'input', label: '眼镜分类名称：', prop: 't_type_name', placeholder: '请输入眼镜分类名称'},
])
const handleSearch = () => {
    console.log(query)
    changePage(1);
};

// 表格相关
let columns = ref([
    {type: 'selection'},
    { prop: 't_type_name', label: '分类名称' },
    { prop: 't_type_img', label: '分类图片' },
    { prop: 't_target_customers', label: '目标人群' },
    { prop: 't_deposit', label: '押金' },
    { prop: 't_cost_price', label: '成本价' },
    { prop: 't_status', label: '状态' },
    { prop: 't_sort', label: '排序' },
    { prop: 'operator', label: '操作', width: 250 },
])
const page = reactive({
    page: 1,
    page_size: 10,
    total: 0,
})
const tableData = ref<Place[]>([]);
const getData = async () => {
    const res = await query_glasses_type_list({page: page.page, page_size: page.page_size, ...query})
    tableData.value = res.data.data_list;
    page.total = res.data.total;
};
getData();

const changePage = (val: number) => {
    page.page = val;
    getData();
};

const changePageSize = (val: number) => {
    page.page_size = val;
    getData();
};


// 新增/编辑弹窗相关
let options = ref<FormOption>({
    labelWidth: '150px',
    span: 20,
    list: [
        { type: 'input', label: '分类名称', prop: 't_type_name', required: true, placeholder: '请输入分类名称' },
        { type: 'upload', label: '眼镜图片', prop: 't_type_img', required: true, placeholder: '', typeData: {"type":"glasses_type"} },
        { type: 'select', label: '目标人群', prop: 't_target_customers', required: true, placeholder: '请选择目标人群', opts: [{label: '成年人', value: '成年人'},{label: '儿童', value: '儿童'}] },
        { type: 'input', label: '押金', prop: 't_deposit', required: true, placeholder: '请输入押金' },
        { type: 'input', label: '成本价', prop: 't_cost_price', required: true, placeholder: '请输入成本价' },
        { type: 'input', label: '排序', prop: 't_sort', required: true, placeholder: '请输入排序' },
    ]
})
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref({});

const handleEdit = (row) => {
    rowData.value = { ...row };
    visible.value = true
    isEdit.value = true;
}

const getImg = (form, url) => {
    form.t_type_img = url  
}

const getUrl = (url) => {
    if (url.indexOf('http://') != -1 || url.indexOf('https://') != -1) {
        let arrUrl = url.split('//')
        let start = arrUrl[1].indexOf('/')
        let relUrl = arrUrl[1].substring(start)
        if (relUrl.indexOf('?') != -1) {
            relUrl = relUrl.split('?')[0]
        }
        return relUrl
    } else {
        return url
    }
   
    
}

const updateData = async(value) => {
    const {t_type_name, t_type_img, t_target_customers, t_deposit, t_cost_price, t_sort,t_code } = value
    // console.log({t_type_name, t_type_img, t_target_customers, t_deposit, t_cost_price, t_sort,t_code })
    const res = await insert_update_glasses_type({t_type_name, t_type_img: getUrl(t_type_img), t_target_customers, t_deposit, t_cost_price, t_sort,t_code })
    if (res.code == '1000') {
        closeDialog();
        getData();
    }

};

const closeDialog = () => {
    visible.value = false;
    isEdit.value = false;
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
    row: {},
    list: []
});

// 删除相关
const handleDelete = (row: Place) => {
    ElMessageBox.confirm('确定要删除吗？', '提示', {
        type: 'warning'
    })
        .then(async () => {
            delete_glasses({glasses_list: [row.g_code] }).then(res => {
                if (res.code == '1000') {
                    getData();
                    ElMessage.success('删除成功');
                }
            })
        })
        .catch(() => { });
    
}
</script>

<style scoped></style>